<template>
  <el-dialog
    v-model="centerDialogVisible"
    :title="t('dbms.createTable.addTitle')"
    width="400"
    align-center
    :close-on-click-modal="false"
  >
    <el-form :rules="rules" :model="form" ref="ruleFormRef">
      <el-form-item :label="t('dbms.createTable.add.title')" :label-width="70" prop="title">
        <el-input v-model="form.title" autocomplete="off" />
      </el-form-item>
      <el-form-item :label="t('dbms.createTable.add.docType')" :label-width="70" prop="docType">
        <el-select
          v-model="form.docType"
          :placeholder="t('dbms.createTable.add.docTypePlaceholder')"
        >
          <el-option :label="t('dbms.createTable.add.docType0')" :value="0" />
          <el-option :label="t('dbms.createTable.add.docType1')" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="form.docType == 1"
        :label="t('dbms.createTable.add.code')"
        :label-width="70"
        prop="code"
      >
        <el-input v-model="form.code" autocomplete="off" />
      </el-form-item>
      <el-form-item
        v-if="form.docType == 1"
        :label="t('dbms.createTable.add.submitUrl')"
        :label-width="70"
        prop="submitUrl"
      >
        <el-input v-model="form.submitUrl" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button-group>
          <el-button @click="centerDialogVisible = false">{{ t('common.cancel') }}</el-button>
          <el-button type="primary" @click="submit">
            {{ t('common.ok') }}
          </el-button>
        </el-button-group>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { CreateTableType } from '@/api/dbms/createTable/types'
import { reactive, ref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { addApi } from '@/api/dbms/createTable'
import { FormInstance, FormRules } from 'element-plus'

const { t } = useI18n()

const ruleFormRef = ref<FormInstance>()

//定义回调函数
const emit = defineEmits<{
  (e: 'callback', data: CreateTableType): void
}>()

const form = reactive<CreateTableType>({
  code: '',
  parentCode: '',
  title: '',
  submitUrl: '',
  docType: 0
})

const clearForm = () => {
  form.code = ''
  form.parentCode = ''
  form.title = ''
  form.submitUrl = ''
  form.docType = 0
}

const codeValidator = (_rule: any, value: any, callback: any) => {
  //正则
  let regx = /[a-zA-z_]+/g

  if (form.docType == 1 && value === '') {
    callback(new Error(t('dbms.createTable.add.rules.codeEmpty')))
  } else if (form.docType == 1 && !regx.test(value)) {
    callback(new Error(t('dbms.createTable.add.rules.codeRegx')))
  } else {
    callback()
  }
}

const rules = reactive<FormRules<CreateTableType>>({
  title: [{ required: true, message: t('dbms.createTable.add.rules.title'), trigger: 'blur' }],
  code: [{ validator: codeValidator, trigger: 'blur' }]
})

const centerDialogVisible = ref(false)

const submit = async () => {
  await ruleFormRef.value?.validate((valid) => {
    if (valid) {
      submitApi()
    }
  })
}

const submitApi = async () => {
  const rs = await addApi(form)
  if (rs.success) {
    form.code = rs.data.code
    centerDialogVisible.value = false
    emit('callback', rs.data)
  }
}

//打开方法
const show = function (parentCode: string) {
  clearForm()
  form.parentCode = parentCode
  centerDialogVisible.value = true
}

defineExpose({ show })
</script>
